<script lang="ts">
    import mixin from "@/uni_modules/u-tools/mixin/mixin";
    import mpMixin from "@/uni_modules/u-tools/mixin/mpMixin";
    import props from "./props";
    import UStatusPlace from "@/uni_modules/u-status-place/components/u-status-place/u-status-place.vue";
    import UCapsulePolyfillPlace from "@/uni_modules/u-capsule-polyfill-place/components/u-capsule-polyfill-place/u-capsule-polyfill-place.vue";
    import UText from "@/uni_modules/u-text/components/u-text/u-text.vue";
    import message from "./i18n/index";
    import {useI18n} from "vue-i18n";

    export default {
        name: "u-nav-bar",
        // 组件
        components: {UStatusPlace, UCapsulePolyfillPlace, UText},
        // 混入
        mixins: [props, mixin, mpMixin],
        // 事件
        emits: ["back", "clickTitle"],
        // 数据
        data()
        {
            return {};
        },
        // 创建完毕
        setup()
        {
            const {t} = useI18n({
                locale: getStorage("language") || uni.getLocale(),
                messages: message
            });

            return {t};
        },
        // 计算属性
        computed: {
            // 获取返回栏高度
            getNavBarHeight(): number
            {
                // 当前导航栏高度
                let navBarHeight = 44;

                // #ifdef MP
                navBarHeight = this.$u.getCapsuleGeometry().height;
                // #endif

                return navBarHeight;
            },
            // 获取导航栏两侧间隙
            getNavBarPadding(): string
            {
                let padding = "";

                // 小程序胶囊位置
                let capsule = 0;

                // #ifdef MP
                // 判断是否需要避开胶囊位置
                if (this.avoidCapsBtn)
                {
                    // 获取胶囊的几何信息
                    const capsuleGeometry = this.$u.getCapsuleGeometry();

                    // 获取安全区域几何信息
                    const safeAreaGeometry = this.$u.getSafeAreaGeometry();

                    capsule = capsuleGeometry.width + (safeAreaGeometry.width - capsuleGeometry.right);
                }
                // #endif

                // 自动留白
                if (this.navigationPadding === "auto")
                {
                    // 当前默认留白区域为6像素
                    padding = `0 ${this.$u.unit(capsule + 6)} 0 ${this.$u.unit(6)}`;
                }
                else
                {
                    padding = `0 calc(${this.$u.unit(this.navigationPadding)} + ${this.$u.unit(capsule)}) 0 ${this.$u.unit(this.navigationPadding)}`;
                }

                return padding;
            },
            // 获取返回文本
            getBackText(): string
            {
                let backText = "";

                // 判断是否存在自定义返回文本
                if (this.backText)
                {
                    backText = this.backText;
                }
                else
                {
                    backText = this.t("navBar.backText");
                }

                return backText;
            }
        },
        // 方法
        methods: {
            // 返回
            backHandler(event: Record<string, any>): void
            {
                this.$emit("back", {event});

                // 判断是否阻止返回事件
                if (!this.preventBack)
                {
                    // 后退
                    uni.navigateBack({delta: this.delta});
                }

                // 阻止冒泡
                this.stop && this.stopPropagation(event);

                // 阻止事件默认行为
                this.prevent && this.preventDefault(event);
            },
            // 标题点击事件
            titleHandler(event: Record<string, any>): void
            {
                this.$emit("clickTitle", {event});

                // 阻止冒泡
                this.stop && this.stopPropagation(event);

                // 阻止事件默认行为
                this.prevent && this.preventDefault(event);
            }
        }
    };
</script>

<template>
    <!-- 自定义返回组件 -->
    <view
        :class="customClass"
        :style="[
            customStyle,
            {'--custom-navigation-background-color': navigationBackgroundColor},
            {'--custom-navigation-background-image': navigationBackgroundImage},
            {'--custom-navigation-background-repeat': navigationBackgroundRepeat},
            {'--custom-navigation-background-position': navigationBackgroundPosition},
            {'--custom-navigation-background-size': navigationBackgroundSize},
            {'--custom-navigation-background-filter': navigationBackgroundFilter}
        ]"
        class="u-nav-bar-warp"
    >
        <!-- 状态栏占位 -->
        <u-status-place />
        <!-- //状态栏占位 -->

        <!-- 内盒 -->
        <view
            :style="[
                {'height': $u.unit(getNavBarHeight)},
                {'--custom-nav-bar-padding': getNavBarPadding},
                {'--custom-nav-bar-text-color': navigationTextColor}
            ]"
            class="nav-bar"
        >
            <!-- 返回栏 -->
            <view class="back">
                <!-- 标准返回栏 -->
                <view
                    v-if="showBack"
                    class="back-club"
                    @tap="backHandler"
                >
                    <u-text
                        :text="showBackText ? getBackText : ''"
                        prefix-icon="arrow-left"
                    />
                </view>
                <!-- //标准返回栏 -->

                <!-- 自定义插槽（为什么这里要单独写一个插槽区域，是因为做为子组件使用的时候，外部透传会导致在小程序下显示异常，比如外部不传递插槽，那么小程序就显示不出来默认占位信息） -->
                <view
                    v-if="$slots.back"
                    class="custom-back-slots"
                >
                    <slot name="back" />
                </view>
                <!-- //自定义插槽 -->
            </view>
            <!-- //返回栏 -->

            <!-- 标题 -->
            <view class="title">
                <!-- 标题栏文本 -->
                <view
                    v-if="title"
                    class="title-text"
                    @tap="titleHandler"
                >
                    <u-text
                        :text="title"
                        v-bind="$attrs"
                    />
                </view>
                <!-- //标题栏文本 -->

                <!-- 标题栏插槽 -->
                <view
                    v-if="$slots.title"
                    class="custom-title-slots"
                >
                    <slot name="title" />
                </view>
                <!-- //标题栏插槽 -->
            </view>
            <!-- //标题 -->

            <!-- 菜单栏 -->
            <view class="menus">
                <!-- 自定义插槽 -->
                <view
                    v-if="$slots.menus"
                    class="custom-menus-slots"
                >
                    <slot name="menus" />
                </view>
                <!-- //自定义插槽 -->
            </view>
            <!-- //菜单栏 -->
        </view>
        <!-- //内盒 -->

        <!-- #ifdef MP -->
        <!-- 胶囊占位垫片（增加垫片的目的是为了不让内容直接和胶囊接触，留有10像素的空白） -->
        <u-capsule-polyfill-place />
        <!-- //胶囊占位垫片 -->
        <!-- #endif -->
    </view>
    <!-- //自定义返回组件 -->
</template>

<style lang="scss" scoped>
    .u-nav-bar-warp
    {
        display: flex;
        flex-direction: column;
        background-color: var(--custom-navigation-background-color, $theme-navigation-background-color);
        background-image: var(--custom-navigation-background-image, $theme-navigation-background-image);
        background-repeat: var(--custom-navigation-background-repeat, $theme-navigation-background-repeat);
        background-position: var(--custom-navigation-background-position, $theme-navigation-background-position);
        background-size: var(--custom-navigation-background-size, $theme-navigation-background-size);
        filter: var(--custom-navigation-background-filter, $theme-navigation-background-filter);

        // 内盒
        .nav-bar
        {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 32px; // 默认设置一个初始化高度，防止闪烁
            padding: var(--custom-nav-bar-padding);

            // 返回栏
            .back
            {
                position: relative;
                z-index: 1;
                display: flex;
                align-items: center;

                // 返回按钮区域
                .back-club
                {
                    :deep(.u-text)
                    {
                        // 前缀
                        .prefix-icon
                        {
                            .u-icon
                            {
                                .icon
                                {
                                    color: var(--custom-nav-bar-text-color, $theme-navigation-color);
                                }
                            }
                        }

                        // 文本
                        .text-view
                        {
                            .text
                            {
                                color: var(--custom-nav-bar-text-color, $theme-navigation-color);
                            }
                        }
                    }
                }

                // 自定义插槽
                .custom-return-slots
                {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }

            // 标题
            .title
            {
                position: absolute;
                right: 0;
                left: 0;
                display: flex;
                align-items: center;
                justify-content: center;

                // 标题文本
                .title-text
                {
                    :deep(.u-text)
                    {
                        // 前缀
                        .prefix-icon
                        {
                            .u-icon
                            {
                                .icon
                                {
                                    color: var(--custom-nav-bar-text-color, $theme-navigation-color);
                                }
                            }
                        }

                        // 文本
                        .text-view
                        {
                            .text
                            {
                                color: var(--custom-nav-bar-text-color, $theme-navigation-color);
                            }
                        }
                    }
                }
            }

            // 菜单栏
            .menus
            {
                position: relative;
                z-index: 1;
                display: flex;
                align-items: center;

                // 自定义插槽
                .custom-menus-slots
                {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
    }
</style>